<template>
    <div v-if="$route.meta.show">
        <div class="form">
            <el-form :inline="true" :model="searchData" class="demo-form-inline">
                <el-form-item>
                    <el-input class="input" v-model="searchData.title" placeholder="请输入商品名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-input class="input" v-model="searchData.barcode" placeholder="请输入商品条形码" clearable />
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchData.status" class="m-2" placeholder="请选择商品状态" size="large" clearable>
                        <el-option v-for="item in adStatusMap" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-cascader v-model="searchData.categoryId" :options="categoryData" placeholder="请选择类目" clearable
                        :props="{ checkStrictly: true, children: 'childrenList', value: 'id', label: 'title', emitPath: false }" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="handelSearch">查找</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Plus" @click="handelAdd">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }">
                <el-table-column type="selection" width="55" />
                <el-table-column type="expand" label="sku信息" width="50">
                    <template #default="props">
                        <el-table :data="props.row.skuList" border :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }">
                            <el-table-column label="商品条码" prop="barCode" />
                            <el-table-column label="商品规格" prop="title" />
                            <el-table-column label="商品库存" prop="stock" />
                            <el-table-column label="原价" prop="originalPrice" />
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="商品ID" prop="id" />
                <el-table-column label="名称" prop="title" width="180" />
                <el-table-column label="图片">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="right" width="auto">
                            <template #default>
                                <img :src="scope.row.img" alt="" width="300">
                            </template>
                            <template #reference>
                                <img :src="scope.row.img" alt="" width="50">
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="商品详细介绍">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handelSee(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="类目ID" prop="categoryId" />
                <el-table-column label="邮费模板ID" prop="freightTemplateId" />
                <el-table-column label="销量" prop="sales" />
                <el-table-column label="单位" prop="unit" />
                <el-table-column label="是否在售">
                    <template #default="scope">
                        <el-tag :type="scope.row.status == 1 ? '' : 'danger'">
                            {{ scope.row.status == 1 ? '在售' : '未售' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="description" width="180" />
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" type="primary" @click="handelEdit(scope.row)">编辑</el-button>
                        <el-button size="small" :type="scope.row.status == 1 ? 'warning' : 'danger'"
                            @click="handelLowerShelf(scope.row)">
                            {{ scope.row.status == 1 ? '下架' : '上架' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <Pagetion v-bind="pagetio" @page-change="pageChange"></Pagetion>
        </div>
        <div>
            <el-backtop target=".el-main" :right="100" :bottom="100" ref="backTop" :visibility-height="20" />
        </div>

        <!-- 查看操作对话框 -->
        <div>
            <el-dialog v-model="outerVisible" title="商品详情">
                <div v-html="productDetail"></div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="outerVisible = false">取消</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import { post } from "@/http/request";
import { Search, Plus, } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import Pagetion from "@/components/pagetion/Pagetion.vue";//分页
import { ClassPagination } from "#/index";
import { useRouter } from "vue-router";

const router = useRouter()
const backTop = ref()//回到顶部组件
const pagetio = reactive(new ClassPagination)//分页
const tableData = ref([])//表格数据
const productDetail = ref()//查看商品详情
const categoryData = ref([])//类目数据
const outerVisible = ref(false)

//活动状态
const adStatusMap = [
    { value: 0, name: '未售' },
    { value: 1, name: '在售' },
]

// 初始化数据需要传递的参数
let params = reactive({
    _gp: "admin.product",
    _mt: "list",
    categoryId: undefined,
    title: "",
    barcode: "",
    status: undefined,
    page: pagetio.pageNo,
    limit: pagetio.pageSize
})

// 搜索需要的数据
let searchData = reactive({
    categoryId: undefined,
    title: "",
    barcode: "",
    status: undefined,
})

// 初始化数据
function loadInit() {
    post(params).then(res => {
        console.log(res);
        let { errno, errmsg, data } = res
        if (200 == errno) {
            tableData.value = data.items
            pagetio.total = data.total
        } else {
            ElMessage.error(errmsg)
        }
    })
}
loadInit()

// 搜索
function handelSearch() {
    params.status = searchData.status
    params.barcode = searchData.barcode
    params.categoryId = searchData.categoryId
    params.title = searchData.title
    loadInit()
}

// 查看商品详情
function handelSee(row: TypeProductList) {
    let data = reactive({
        _gp: "admin.product",
        _mt: "detail",
        spuId: row.id
    })
    post(data).then(res => {
        console.log(res);
        let { errno, errmsg, data } = res
        if (200 == errno) {
            productDetail.value = data.detail
        } else {
            ElMessage.error(errmsg)
        }
    })
    nextTick(() => {
        outerVisible.value = true
    })
}

// 上下架操作
function handelLowerShelf(row: TypeProductList) {
    let data = reactive({
        _gp: "admin.product",
        _mt: "freezeOrActivation",
        spuId: row.id,
        status: row.status == 1 ? 0 : 1
    })
    post(data).then(res => {
        let { errmsg, errno } = res
        console.log(res);
        if (200 == errno) {
            ElMessage.success(row.status == 1 ? '下架成功' : '上架成功')
            loadInit()
        } else {
            ElMessage.error(errmsg)
        }
    })
}

// 添加
function handelAdd() {
    router.replace(
        {name:'productlistcreate'}
    )
}

// 编辑
function handelEdit(row: TypeProductList) {
    router.replace(
        {
            name:'productlistmodify',
            params: {id:row.id}
        }
    )
}

// 请求弹窗类目数据
function popCategory() {
    let data = {
        _gp: 'admin.category',
        _mt: 'categoryTree'
    }
    post(data).then(res => {
        let { data, errno, errmsg } = res
        if (200 == errno) {
            categoryData.value = data
        } else {
            ElMessage.error(errmsg)
        }
    })
}
popCategory()

// 分页组件子传父自定义事件
const pageChange = (e: TypePage) => {
    params.page = e._pageNo
    params.limit = e._pageSize
    loadInit()
    nextTick(() => {
        backTop.value.$el.click?.()
    })
}
</script>

<style lang="less" scoped>
.el-form-item {
    margin-right: 10px !important;
}

.input {
    height: 40px !important;
}

.el-select {
    width: 200px;
}

/deep/ .el-cascader {
    width: 200px;

    .el-input {
        height: 40px !important;
    }
}

.el-input {
    width: 200px !important;
}

:deep(.el-dialog__body) {
    padding-bottom: 5px;
    padding-top: 0px;

}

:deep(img) {
    width: 100%;
}

:deep(.desc_anchor) {
    width: auto;
}
</style>